5.3 Nested ordered list

  1. Motivations
    • What can you say about the numbers in the list of topics in this Section 3 in Chapter 5?
    • Can you include the concept of chapters and sections using the ol or ul element?

  2. Read all in CSS Pseudo-elements.
    • When do you use pseudo elements?
    • Study carefully the ::before pseudo element.
    • Trial 1: Let's try to put ' Trial 1: ' instead of a bullet in each <li>.


  3. Read all in CSS content Property.
    • What is the CSS content property?
    • With which elements is the content property used?    ::before and ::after
    • Did you try all the examples in the above link?
    • What is the counter-increment property?
    • What is the counter() function?
    • List all the CSS functions that you have learned.
  4. Read all in Automatic counters and numbering.
    • Automatic numbering is controlled with two properties -    counter-reset and counter-increment
    • Can you decrease a counter variable?
    • Do you now have a good idea how to display nested orders, such as 1, 1.1, 1.2?
    • Trial 2: Let's try to put increasing numbers instead of a bullet in each <li>. Numbers to be used are 5, 8, 11, ...


      • In the above example, can you use the number 1, 2, 3, 4, ...?
  5. Nested ordered list
    • Do you now have a good idea how to display nested orders, such as 1, 1.1, 1.2?
    • The idea is to use Chapters, Sections, and Subsections with 
      <ol>
    <li>Chapter 1.
        <ol>
            <li>Section 1.1
                <ul>
                    <li> ... </li>
                </ul>
            </li>
            <li>Section 1.2
                <ul>
                    <li> ... </li>
                </ul>
            </li>
        </ol>
    </li>
    <li>Chapter 2.
        ...
    </li>
</ol>
    • Can you remove the numbers and bullets? Do you remember the CSS property? Here is an example.
      1. Chapter 1.
        1. Section 1.1
          • ...
        2. Section 1.2
          • ...
      2. Chapter 2.
        1. Section 2.1
          • ...
    • Can you use content, counter(), counter-reset, counter-increment to give the proper chapter numbers?
      1. Chapter...
        1. Section 1.1
          • ...
        2. Section 1.2
          • ...
      2. Chapter...
        1. Section 2.1
          • ...
      Trial 3: Let's try to put the chapter numbers with .. instead of a bullet in each <li>. E.g., 1.. 2.. 3..


    • Can you use content, counter(), counter-reset, counter-increment to give the proper section numbers?
      1. Chapter...
        1. Section...
          • ...
        2. Section...
          • ...
      2. Chapter...
        1. Section...
          • ...
      Trial 4: Let's try to put the section numbers instead of a bullet in each <li>. E.g., 1.1, 1.2, 1.3


      Trial 5: Let's try to put chapter numbers and section numbers together.


    • Can you study the code for the above example of nested ordered list?

  6. Learning outcomes